<template>
<Row>
<Col span="12" class="left">
	<Row><Col span="12">
	<Button icon="md-add" shape="circle" type="primary" @click="modal1 = true">添加道路</Button>
	<Modal v-model="modal1"  @on-ok="handleAddRoad" @on-cancel="handleCancel" 
	:mask-closable="false" :loading="true">
	  <p slot="header"><Icon custom="iconfont icon-daolu" /><span>&nbsp;新增道路</span></p>
	  <Form ref="formItems1" :model="formItem1" :label-width="80" :rules="ruleValidate1">
	  	<FormItem label="道路名称" prop="rname">
	       <Input v-model="formItem1.rname" placeholder="道路名称"></Input>
	    </FormItem>
	    <FormItem label="方向" prop="direct">
	       <Input v-model="formItem1.direct" placeholder="请输入方向"></Input>
	    </FormItem>
	  </Form>
	</Modal>
	</Col><Col span="12"><Input search enter-button placeholder="道路名称" @on-search="handleSearch"/></Col></Row><br>
	<Table ref="table1" :columns="columns1" :data="data1" row-key="rname" :max-height="maxHeight" @on-row-click="handleRowClick" border highlight-row>
		<template #rname="{ row, index }">
			<Input type="text" v-model="editRname" v-if="editIndex === index" /> <span v-else>{{ row.rname }}</span>
		</template>
		<template #direct="{ row, index }">
			<Input type="text" v-model="editDirect" v-if="editIndex === index" /> <span v-else>{{ row.direct }}</span>
		</template>
		<template #action="{ row, index }">
	      <div class="ty-flex-row-around">
		      <span v-if="editIndex === index">
		        <Button icon="md-checkmark" type="success" @click="handleSave(index)"></Button> &nbsp;
		        <Button icon="md-close" type="error" @click="editIndex = -1"></Button>
		      </span>
		      <span v-else>
		       	<Button custom-icon="iconfont icon-bianji" @click="handleEdit(row, index)" shape="circle"></Button>
		      </span>
		      <span>
		        <Button custom-icon="iconfont icon-laji" @click="handleDelete(row, index)" shape="circle"></Button>
		      </span>
		      <span>
		      	<Button icon="md-add" @click="modal2 = true" shape="circle">添加路段</Button>
		      	<Modal v-model="modal2"  @on-ok="handleAddSection" @on-cancel="handleCancel" :mask-closable="false" :loading="true">
				  <p slot="header"><Icon type="md-locate"/><span>&nbsp;新增路段</span></p>
				  <Form ref="formItems2" :model="formItem2" :label-width="80" :rules="ruleValidate2">
				  	<FormItem label="路段名称" prop="section">
				       <Input v-model="formItem2.section" placeholder="路段名称"></Input>
				    </FormItem>
				  </Form>
				</Modal>
		      </span>
	      </div>
	    </template>
	</Table>
</Col>
<Col span="12" class="right" v-show="tableRowClicked!=-1">
<Divider orientation="left" size="default"><Icon type="md-locate" />路段</Divider>
	<Table ref="table2" :columns="columns2" :data="data2" :show-header="false" :max-height="maxHeight" border>
		<template #section="{ row, index }">
		<Row>
			<Col span="12" class="ty-flex-row-left">
				<Input type="text" v-model="editSection" v-if="editIndex2 === index" placeholder="请输入路段名称"/> 
				<span v-else>{{ row.section }}</span>
			</Col>
		    <Col span="12" class="ty-flex-row-right">	  
		      <span v-if="editIndex2 === index">
		        <Button icon="md-checkmark" type="success" @click="handleSaveRow2(row,index)"></Button> &nbsp;
		        <Button icon="md-close" type="error" @click="editIndex2 = -1"></Button>&nbsp;
		      </span>
		      <span v-else>
		       	<Button type="text" custom-icon="iconfont icon-bianji" @click="handleEditRow2(row, index)" shape="circle"></Button>&nbsp;
		      </span>
		      <span>
		        <Button type="text" custom-icon="iconfont icon-laji" @click="handleDeleteRow2(row, index)" shape="circle"></Button>
		      </span>
		     </Col>
	     </Row>
	     </template>
	</Table>
</Col>
</Row>	
</template>
<script>
export default {
	data () {
        return {
        	modal1:false,
        	modal2:false,
        	tableRowClicked:-1,
        	searchKey:'',
        	maxHeight:0,
        	editIndex:-1,
        	editIndex2:-1,
        	editRname:'',
        	editDirect:'',
        	editSection:'',
        	columns1:[
        		{title:'道路',slot:'rname'},
        		{title:'方向',slot:'direct'},
        		{title:'操作',slot:'action',width:270}
        	],
        	data1:[],
        	columns2:[
        		{title:'路段名',slot:'section',align:'left'}
            ],
            data2:[],
            formItem1:{
            	rname:'',
            	direct:''
        	},
        	ruleValidate1:{
        		rname:[{required: true, message: '道路名称不能为空', trigger: 'blur' }],
        		direct:[{required: true, message: '方向不能为空', trigger: 'blur' }]
        	},
            formItem2:{
            	section:''
        	},
        	ruleValidate2:{
        		section:[{required: true, message: '路段名不能为空', trigger: 'blur' }]
        	}
        }
    },
	methods: {
	   handleSearch(value){
		   this.searchKey=value;
		   this.getMainSetting3RoadList(this.searchKey)
	   },
	   getMainSetting3RoadList(key){
		   this.$axios.post("mainSetting3RoadList.action",{str1:key}).then(res=>{
				this.data1=res.data
				this.tableRowClicked=-1
			})
	   },
	   getMainSetting3SectionList(code){
		   this.$axios.post("mainSetting3SectionList.action",{int1:code}).then(res=>{
				this.data2=res.data
			})
	   },
	   handleEdit (row, index) {
	        this.editRname = row.rname
	        this.editDirect = row.direct
	        this.editIndex = index
	   },
	   handleSave (index) {
	        this.data1[index].rname = this.editRname
	        this.data1[index].direct = this.editDirect
	        this.editIndex = -1
	        this.$axios.post("mainSetting3RoadSave.action",{name:this.editRname,note1:this.editDirect,code:this.data1[index].code}).then(res=>{
	           if(res.data=='suc'){
    			   this.$Message.success('道路更新成功')
    		   }else{		   
    			   this.$Message.error('道路更新失败'+res.data)
    			   this.getMainSetting3RoadList(this.searchKey)
    		   }
			})
	   },
	   handleAddRoad(){
		   this.$refs.formItems1.validate((valid) => {
               if (valid) {
				this.modal1=false
				this.$axios.post("mainSetting3RoadAdd.action",{name:this.formItem1.rname,note1:this.formItem1.direct}).then(res=>{
	    		   if(res.data=='suc'){
	    			   this.$Message.success('道路添加成功')
	    			   this.getMainSetting3RoadList(this.searchKey)
	    		   }else{		   
	    			   this.$Message.error('道路添加失败'+res.data)
	    		   }
	    		   this.$refs.formItems1.resetFields()
		    	})
		    	
               } else {
            	   that.$Message.error('校验不通过')
               }
           })
	   },
	   handleCancel(){
		   this.$refs.formItems1.resetFields()
		   this.$refs.formItems2.resetFields()
	   },
	   handleDelete(row, index){
		   this.$Modal.confirm({title: '确定要删除道路？',onOk: () => {
		    this.$axios.post("mainSetting3RoadDelete.action",{code:row.code}).then(res=>{
	           if(res.data=='suc'){
    			   this.$Message.success('道路删除成功')
    			   this.data1.splice(index,1)
    			   this.tableRowClicked=-1
    		   }else{		   
    			   this.$Message.error('道路删除失败'+res.data)
    		   }
			})
		   }})
	   },
	   handleAddSection(){
		   this.$refs.formItems2.validate((valid) => {
               if (valid) {
				this.modal2=false
				this.$axios.post("mainSetting3SectionAdd.action",{name:this.formItem2.section,num1:this.data1[this.tableRowClicked].code}).then(res=>{
	    		   if(res.data=='suc'){
	    			   this.$Message.success('路段添加成功')
	    			   this.getMainSetting3SectionList(this.data1[this.tableRowClicked].code)
	    		   }else{		   
	    			   this.$Message.error('路段添加失败'+res.data)
	    		   }
	    		   this.$refs.formItems2.resetFields()
		    	})
		    	
               } else {
            	   that.$Message.error('校验不通过')
               }
           })
	   },
	   handleRowClick(row,index){
		   this.tableRowClicked=index
		   this.getMainSetting3SectionList(row.code);
	   },
	   handleSaveRow2(row,index){
		   this.data2[index].section = this.editSection
	       this.editIndex2 = -1
		   this.$axios.post("mainSetting3SectionSave.action",{name:this.editSection,code:row.code}).then(res=>{
	           if(res.data=='suc'){
    			   this.$Message.success('路段更新成功')
    		   }else{		   
    			   this.$Message.error('路段更新失败'+res.data)
    			   this.getMainSetting3SectionList(this.data1[this.tableRowClicked].code)
    		   }
			})
	   },
	   handleEditRow2(row, index){
	        this.editSection = row.section
	        this.editIndex2 = index
	   },
	   handleDeleteRow2(row, index){
		   this.$Modal.confirm({title: '确定要删除路段？',onOk: () => {
		    this.$axios.post("mainSetting3SectionDelete.action",{code:row.code}).then(res=>{
	           if(res.data=='suc'){
    			   this.$Message.success('路段删除成功')
    			   this.data2.splice(index,1)
    		   }else{		   
    			   this.$Message.error('路段删除失败'+res.data)
    		   }
			})
		   }})
	   }
	},
	mounted(){
		this.maxHeight=window.innerHeight-this.$refs.table1.$el.offsetTop-152
	},
	created(){
		this.getMainSetting3RoadList(this.searchKey)
	}
}
</script>
<style scoped>
.left{
padding:16px;
}
.right{
padding:12px 16px;
}
</style>